<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2118772_hnkt282etz8.css">
  <title>Resume</title>
</head>
<body>
  <header>
    <img class="head-img" src="./images/njh1.png" alt="头像">
    <h2>聂佳华</h2>
    <p>应聘前端工程师</p>
  </header>
  <main>
    <section class="column-1">
      <div class="demo infor">
        <div class="iconfont icon-infor"></div>
        <div class="demo-header">
          基本信息
        </div>
        
        <ul class="demo-list">
          <li><span class="iconfont icon-phone"></span>17695500412</li>
          <li><span class="iconfont icon-wechat"></span>njh188663864</li>
          <li><span class="iconfont icon-email"></span>188663864@qq.com</li>
          <li><span class="iconfont icon-study"></span>本科</li>
        </ul>
      </div>

      <div class="demo skills">
        <div class="iconfont icon-skills"></div>
        <div class="demo-header">
          掌握技能
        </div>
        
        <ul class="demo-list">
          <li>熟练使用 <span class="bcspan">HTML5</span> 标签编写语义化页面</li>
          <li>熟悉 <span class="bcspan">CSS/SCSS</span>，盒模型，定位，flex、grid布局等</li>
          <li>熟悉 <span class="bcspan">JavaScript， ES6</span> 等</li>
          <li>熟悉 <span class="bcspan">React/Redux</span> 技术栈等使用，能够使用React进行基本开发</li>
          <li>熟悉前后端交互技术 <span class="bcspan">JSONP、AJAX</span> ，了解fetch</li>
          <li>了解 <span class="bcspan">Webpack、Npm、TypeScript、Yarn、Antd、ElementUI、Echarts</span> 等</li>
        </ul>
      </div>
      
      <div class="demo infor">
        <div class="iconfont icon-skills"></div>
        <div class="demo-header">
          技能图谱
        </div>
        
        <dl class="demo-list">
          <dt>HTML5</dt>
          <dd><span class="bar" style="width: 70%;"></span></dd>
          <dt>CSS3</dt>
          <dd><span class="bar" style="width: 70%;"></span></dd>
          <dt>JavaScript</dt>
          <dd><span class="bar" style="width: 70%;"></span></dd>
          <dt>React</dt>
          <dd><span class="bar" style="width: 60%;"></span></dd>
        </ul>
      </div>

      <div class="demo infor">
        <div class="iconfont icon-infor"></div>
        <div class="demo-header">
          更多信息
        </div>
       
        <ul class="demo-list">
          <li>个人博客：<a href="https://juejin.cn/user/826459452881752/posts">掘金</a></li>
          <li>开源仓库：<a href="https://github.com/zhizhi777">Github</a></li>
        </ul>
      </div>
    </section>
    <section class="column-2">
      <div class="demo edu">
        <div class="iconfont icon-study"></div>
        <div class="demo-header">
          教育经历
        </div>
        
        <ul class="demo-list">
          <li>
            <span class="edu-time">09/2015~07/2019</span>
            <h3 class="edu-name">天津工业大学(双一流)</h3>
            <span class="edu-major">软件工程</span>
            <span class="edu-text"></span>
          </li>
          
    
        </ul>
      </div>

      <div class="demo edu work">
        <div class="iconfont icon-work"></div>
        <div class="demo-header">
          工作经历
        </div>
        
        <ul class="demo-list">
          <li>
            <span class="edu-time">07/2019~10/2020</span>
            <h3 class="edu-name">北京智启蓝墨信息技术有限公司</h3>
            <span class="edu-major">初级前端工程师</span>
 
            <span class="edu-text">
              <ul>
                <li>项目介绍：主要负责根据UI设计稿完成书籍的制作，运用HTML5标签对书籍进行语义化开发。主要工作内容：1. 根据设计稿完全实现书籍样式，主要包括章头，节头，图片，画廊，交互条等的制作。2. 对书籍进行手机，Pad和PC端适配。3. 根据书籍内容对每章内容进行交互制作，包括选择题，填空题，简答题，连线题，连连看等。</li>
                <li>技术栈： <span class="bcspan">HTML5 / CSS3 / JavaScript</span></li>
              </ul>
            </span>
          </li>
    
        </ul>
      </div>
      <div class="demo edu work project">
        <div class="iconfont icon-project"></div>
        <div class="demo-header">
          项目经历
        </div>
        
        <ul class="demo-list">
          <li>
            <span class="edu-time"></span>
            <h3 class="edu-name">移动端网页记账</h3>
            <span class="edu-major">小七记账</span>
            <span class="edu-text">
              <ul>
                <li>项目介绍：小七记账是一个基于 <span class="bcspan">React</span> 的移动端本地记账应用。项目由 <span class="bcspan">React-Router</span> 分为三大页面:明细、记账以及图标。该项目实现了账单的记录，标签管理，数据统计以及数据可视化展示等主要功能，基于 <span class="bcspan">TypeScript</span> 编写，通过 <span class="bcspan">LocalStorange</span> 存储数据，<span class="bcspan">styled-components</span> 书写样式，<span class="bcspan">day.js</span> 对时间处理。</li>
                <li>技术栈： <span class="bcspan">React / Ant Design / TypeScript / styled-components / Webpack / React-router / day.js / Echarts</span></li>
                <li>预览地址: <a href="https://zhizhi777.gitee.io/money/#/">https://zhizhi777.gitee.io/money/#/</a></li>
                <li>项目地址: <a href="https://github.com/zhizhi777/money">https://github.com/zhizhi777/money</a></li>
              </ul>
            </span>
          </li>

          <li>
            
            <h3 class="edu-name">在线图床</h3>
            <span class="edu-major">Epic</span>
            <span class="edu-text">
              <ul>
                <li>项目介绍：Epic 是一个基于 <span class="bcspan">React</span> 的在线图床网站，兼容 PC 和移动端。用户可以上传图片、删除图片，获取图片的网址。项目由 <span class="bcspan">leancloud</span> 作为后端，由 <span class="bcspan">Mobx</span> 进行状态管理，<span class="bcspan">styled-components</span> 书写样式，选用 <span class="bcspan">Ant Design</span> 作为 UI 框架。</li>
                <li>技术栈：<span class="bcspan">React / React-router / Mobx / Mobx-React / Ant Design / styled-components / Leancloud</span></li>
                <li>预览地址: <a href="https://zhizhi777.gitee.io/epic/#/">https://zhizhi777.gitee.io/epic/#/</a></li>
                <li>项目地址: <a href="https://github.com/zhizhi777/epic">https://github.com/zhizhi777/epic</a></li>
              </ul>
            </span>
          </li>
          

          <li>
            <span class="edu-time"></span>
            <h3 class="edu-name">简易element ui</h3>
            <span class="edu-major">easyUi</span>
            <span class="edu-text">
              <ul>
                <li>项目介绍：easyUi是一个基于 <span class="bcspan">JavaScript、ES6</span>的简易element ui。主要包括Carousel（走马灯），Collapse（折叠面板），Dialog（对话框），Message（消息提示），tab（标签页）以及tooltip（文字提示）。</li>
                <li>技术栈： <span class="bcspan">JavaScript / ES6</span></li>
                <li>预览地址: <a href="https://zhizhi777.gitee.io/easyui/Collapse/Collapse.html">https://zhizhi777.gitee.io/easyui/Collapse/Collapse.html</a></li>
                <li>项目地址: <a href="https://github.com/zhizhi777/easyUi">https://github.com/zhizhi777/easyUi</a></li>
              </ul>
            </span>
          </li>

          <li>
            <span class="edu-time"></span>
            <h3 class="edu-name">在线PPT</h3>
            <span class="edu-major">OneSlide</span>
            <span class="edu-text">
              <ul>
                <li>项目介绍：OneSlide是使用原生 <span class="bcspan">Javascript</span>实现的一款简洁高效的在线 PPT 制作平台。使用该工具用户可使用 <span class="bcspan">markdown</span> 在短时间内完成 PPT 制作，支持内容编辑、主题切换、特效切换、下载、演讲者模式等功能。</li>
                <li>技术栈： <span class="bcspan">JavaScript / ES6 / Markdown / Leancloud</span></li>
                <li>预览地址: <a href="https://zhizhi777.gitee.io/oneslide/demo.html#/">https://zhizhi777.gitee.io/oneslide/demo.html#/</a></li>
                <li>项目地址: <a href="https://github.com/zhizhi777/Oneslide">https://github.com/zhizhi777/Oneslide</a></li>
              </ul>
            </span>
          </li>

          <li>
            <span class="edu-time"></span>
            <h3 class="edu-name">小程序在线翻译</h3>
            <span class="edu-major">小七翻译</span>
            <span class="edu-text">
              <ul>
                <li>项目介绍：小七翻译是一个在线翻译小程序。该项目使用百度翻译api接口，可以查看最近10次的翻译历史。</li>
                <li>技术栈：<span class="bcspan">微信小程序</span></li>
                <li>项目地址: <a href="https://github.com/zhizhi777/translation">https://github.com/zhizhi777/translation</a></li>
              </ul>
            </span>
          </li>
          
          <li>
            <span class="edu-time"></span>
            <h3 class="edu-name">查询天气的命令行工具</h3>
            <span class="edu-major">weathernjh-cli</span>
            <span class="edu-text">
              <ul>
                <li>项目介绍：weathernjh-cli 是基于 weathernjh 制作的一款可以查询天气的 <span class="bcspan">命令行工具</span>。weathernjh 是通过 <span class="bcspan">axios</span> 获取心知天气接口的数据, 使用<span class="bcspan">promise</span> 来抛出数据。weathernjh-cli 中对数据进行处理。</li>
                <li>技术栈：<span class="bcspan">npm / Axios / Promise</span></li>
                <li>项目地址: <a href="https://www.npmjs.com/package/weathernjh-cli">https://www.npmjs.com/package/weathernjh-cli</a></li>
              </ul>
            </span>
          </li>

        </ul>
      </div>

      <div class="demo edu work">
        <div class="iconfont icon-infor"></div>
        <div class="demo-header">
          个人评价
        </div>
        
        <div class="myself">
          本人为人乐观开朗，做事认真负责，具备较强的逻辑思维和判断能力；热爱互联网，喜欢钻研新技术，能够快速学习新文档并进行开发。

        </div>
      </div>
    </section>
  </main>
</body>
</html>